<!--
 * @Author: HuangBingQuan <17671241237@163.com>
 * @Date: 2025-01-16 16:00:44
 * @LastEditTime: 2025-01-16 16:03:08
 * @FilePath: /low-code-platform/src/components/SurveyComs/Common/MaterialsHeader.vue
-->
<template>
    <div>
        <div class="container mb-15">
            <h2 :style="{fontSize: `${titleSize}px`, 'color': titleColor }" class="title font-weight-100">
                <span>{{ serialNum }}.</span>
                <span :class="{'font-bold': !titleWeight, 'font-italic': !titleItalic}">{{ title }}</span>
            </h2>
            <div :class="{'font-bold': !descWeight, 'font-italic': !descItalic}" :style="{fontSize: `${descSize}px`, 'color': descColor}" class="desc">{{ desc }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
    defineProps({
        serialNum: {
            type: Number,
            required: true
        },
        title: {
            type: String,
            default: ''
        },
        desc: {
            type: String,
            default: ''
        },
        titleSize: {
            type: String,
            default: '22'
        },
        descSize: {
            type: String,
            default: '16'
        },
        titleItalic: {
            type: Number,
            default: 0
        },
        descItalic: {
            type: Number,
            default: 0
        },
        titleWeight: {
            type: Number,
            default: 0
        },
        descWeight: {
            type: Number,
            default: 0
        },
        titleColor: {
            type: String,
            default: ''
        },
        descColor: {
            type: String,
            default: ''
        }
    });
</script>

<style lang="scss" scoped>
.container {
    > h2 {
        font-size: 20px;
        > span {
            margin: 0 5px;
        }
    }
}
.desc {
    font-size: var(--font-size-base);
    color: var(--font-color-light);
    text-indent: 5px;
}
</style>
